<html>
          <head>
              <script type="text/javascript" src="https://www.google.com/jsapi"></script>
              <script type="text/javascript" src="http://app.nimbits.com/assets/js/nimbits-3.3.0.js"></script>
              <script type="text/javascript">

                  google.load("visualization", "1", {packages:["corechart"]});
                  google.setOnLoadCallback(start);

                  function start() {
                      // drawChart(null);
                      getPoint(drawChart, 'http://app.nimbits.com', '7329f0a3-738b-43f3-b503-3f0f5bec433c', 10)
                  }

                  function drawChart(_point) {
                      var data = new google.visualization.DataTable();
                      data.addColumn('string', 'Year');
                      data.addColumn('number', _point.name);
                      var values = _point.values;
                      for (i = 0; i < values.length; i++) {
                          var value = (eval('(' + values[i] + ')'));
                          var date = new Date(value.timestamp);
                          var ds = date.getFullYear() + "-" + date.getMonth() + "-" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
                          data.addRow([ds, value.d]);
                      }
                      var options = {
                          width: 800, height: 240,
                          title: 'Verbruik van PC.'
                      };

                      var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
                      chart.draw(data, options);
                  }
              </script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="https://api.thingspeak.com/javascripts/highcharts.js"></script>
              <script type="text/javascript">

			  	// users timezone offset
			  	var myOffset = new Date().getTimezoneOffset();

			  	// converts date format from JSON
			  	function getChartDate(d) {
			  		// get the data using javascript's date object (year, month, day, hour, minute, second)
			  		// months in javascript start at 0, so remember to subtract 1 when specifying the month
			  		// offset in minutes is converted to milliseconds and subtracted so that chart's x-axis is correct
			  		return Date.UTC(d.substring(0,4), d.substring(5,7)-1, d.substring(8,10), d.substring(11,13), d.substring(14,16), d.substring(17,19)) - (myOffset * 60000);
			  	}

			  	$(document).ready(function() {
			  		// blank array for holding chart data
			  		var chartData = [];
			  		// variable for the date string
			  		var d;
			  		// variable for the data point
			  		var p;
			  		// variable for the local date in milliseconds
			  		var localDate;

			  		// get the data with a webservice call
			  		$.getJSON('https://api.thingspeak.com/channels/1226/field/1.json?callback=?&amp;results=15&amp;offset=0;key=D3908GUXP6364589', function(data) {
			  			// if no access
			  			if (data == '-1') {
			  				$('#chart-container').append('This channel is not public.  To embed charts, the channel must be public or a read key must be specified.');
			  			}

			  			// iterate through each feed
			  			$.each(data.feeds, function() {
			  				p = this.field1;
			  				// if a numerical value exists add it
			  				if (!isNaN(parseInt(p))) {
			  					chartData.push([getChartDate(this.created_at), parseFloat(p)]);
			  				}
			  			});

			  			// specify the chart options
			  			var chartOptions = {
			  				chart: {
			  					renderTo: 'chart-container',
			  					defaultSeriesType: 'line',
			  					backgroundColor: '#ffffff',
			  					events: {
			  						load: function() {
			  							// push data every 15 seconds
			  							setInterval(function() {

			  								// get the data with a webservice call
			  								$.getJSON('https://api.thingspeak.com/channels/1226/feed/last.json?callback=?&amp;offset=0;key=D3908GUXP6364589', function(data) {
			  									p = data.field1;
			  									d = getChartDate(data.created_at);
			  									last_date = dynamicChart.series[0].data[dynamicChart.series[0].data.length-1].x;

			  									// if a numerical value exists and it is a new date, add it
			  									if (!isNaN(parseInt(p)) && (d != last_date)) {
			  										dynamicChart.series[0].addPoint([d, parseFloat(p)], true, true);
			  									}
			  								});

			  							}, 15000);
			  						}
			  					}
			  				},
			  				title: {
			  					text: ''
			  				},
			  				plotOptions: {
			  					line: {
			  						color: '#d62020'
			  					},
			  					bar: {
			  						color: '#d62020'
			  					},
			  					column: {
			  						color: '#d62020'
			  					},
			  					series: {
			  						marker: {
			  							radius: 3
			  						},
			  						animation: true
			  					}
			  				},
			  				tooltip: {
			  					// reformat the tooltips so that local times are displayed
			  					formatter: function() {
			  						var d = new Date(this.x + (myOffset*60000));
			  						return this.series.name + ':<b>' + this.y + '</b><br/>' + d.toDateString() + '<br/>' + d.toTimeString().replace(/\(.*\)/, "");
			  					}
			  				},
			  				xAxis: {
			  					type: 'datetime',
			  					title: {
			  						text: ''
			  					}
			  				},
			  				yAxis: {
			  					title: {
			  						text: ''
			  					}
			  				},
			  				legend: {
			  					enabled: false
			  				},
			  				series: [{
			  					name: data.channel.field1
			  				}]
			  			};

			  			// add the data to the chart
			  			chartOptions.series[0].data = chartData;

			  			// set chart labels here so that decoding occurs properly
			  			chartOptions.title.text = 'Verbruikte energie';
			  			chartOptions.xAxis.title.text = 'Time';
			  			chartOptions.yAxis.title.text = data.channel.field1;

			  			// draw the chart
			  			var dynamicChart = new Highcharts.Chart(chartOptions);

			  		});

			  	});

			  </script>

              <script type="text/javascript" language="javascript">
			  			  		           function callback(point) {

			  			  		               alert(point.name + " current value:" + point.value.d);
			  			  		           }

		      </script>

          </head>
          Thingspeak
          <iframe width="450" height="250" style="border: 1px solid #cccccc;" src="https://thingspeak.com/channels/1226/charts/1?results=1000&days=1&yaxis=watts&xaxis=time&title=e-mints"></iframe>
          <div id="chart_div"></div>
		  <a href="#" onclick="getPoint(callback, 'http://app.nimbits.com', '7329f0a3-738b-43f3-b503-3f0f5bec433c', 10)">hello</a>

<div id="chart-container" style="width: 500px; height: 260px; padding-left: 20px; float: left;"></div>
<iframe width="450" height="250" style="border: 1px solid #cccccc;" src="https://thingspeak.com/channels/1226/charts/1?timescale=30&results=1000&days=5&yaxis=watts&xaxis=time&title=e-mints"></iframe>




          </body>
          </html>